<template>
    <!--      广告-->
    <Advertising>
        <template v-slot:img>
            <img src="/public/img/home/t01b8d976a9f12bd368.jpg" alt="" style="width: 100%; height: 100px">
        </template>
        <template v-slot:title>
            广告
        </template>
    </Advertising>

    <div class="wallpaper_box displayBox">

        <div class="wallpaper_left">
            <!--            游戏内容-->
            <ResourceVertically :data-list="dataList"></ResourceVertically>
        </div>

        <div class="wallpaper_right">
            <div style="position: sticky; top: 80px;right: 0;z-index: 99999">
                <!--    大家都在玩-->
                <SideInformation :img="'/img/home/game.png'"><h3>大家都在玩</h3></SideInformation>

                <!--            广告-->
                <Advertising>
                    <template v-slot:img>
                        <img src="/public/img/home/t01b8d976a9f12bd368.jpg" alt="" style="width: 100%; height: 100px">
                    </template>
                    <template v-slot:title>
                        广告
                    </template>
                </Advertising>
            </div>
        </div>

    </div>
</template>

<script setup>
import ResourceVertically from "@/components/publicComponent/ResourceVertically.vue";
import {onMounted, ref} from "vue";
import SideInformation from "@/components/publicComponent/SideInformation.vue";
import Advertising from "@/components/publicComponent/Advertising.vue";
import api from "@/request/index.js";

//当前页码，类型，查询条数
const pages = ref({
    size: 12,//10条
    kind: "游戏",//类型,默认软件
    current: 1, //第一页
    page: 0,//总页数
    last: "",//是否最后一页
});

//内容列表
const dataList = ref([
    {
        id:0,
        uid: 1003,//文章所属用户id
        body: "文章内容", //文章内容
        title: "文章标题", //文章标题
        support: 12, //点赞数
        visit: 1275, //浏览数
        cover: "/img/home/t01b8d976a9f12bd368.jpg", //封面
        time: new Date,//文章时间
        kind:"游戏",//文章类型
        support_statue: false, //是否点赞
    }
]);

//预加载时间
onMounted(() => {
    dataList.value=[];
    getData();
    window.addEventListener('scroll', throttleHandleScroll);
})

//是否开启滚动加载
const scrollLoad = ref(true);

//监听页面的滚动高度,快达到底部时加载文章数据
const throttleHandleScroll = () => {
    //执行的高度,距离底部高度
    const distanceToBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
    if (distanceToBottom <= 400 && scrollLoad.value && pages.value.page > pages.value.current) {
        scrollLoad.value = false;
        console.log("滚动加载文章数据~~~~");
        pages.value.current += 1;
        getData();
    }else if(distanceToBottom > 200){
        scrollLoad.value = true;
    }
};

//获取资源列表
const getData = () => {
    api.getArticlePage(pages.value.current, pages.value.size, pages.value.kind).then((res) => {
        dataList.value =  dataList.value.concat(res.data.data.records) ;
        pages.value.page = res.data.data.page;
    })

}

</script>

<style scoped>
.wallpaper_box {
    display: flex;
    justify-content: center;
}

.wallpaper_left {
    width: 800px;
    margin-right: 15px;
}

.wallpaper_right {
    width: 300px;

}
</style>